import { mapGetters } from 'vuex'
import getThemeColor from '@/utils/themesColor'

export default {
  props: {
    statisticsData: {
      type: Object,
      default: () => {
        return {
          cableList: [],
          fiberList: [],
          stationList: [],
          bizStatList: [],
          alarmStatus: [],
          odfPortStatusList: [],
          lightPortStatusList: [],
          smartDeviceList: [],
          deviceTypeList: [],
          chainRatioList: [],
          onlineStatus: {},
          runStatus: {},
          portStatus: {}
        }
      }
    },
    staticsItem: {
      type: Object,
      default: () => {
        return {
          width: 1,
          height: 1
        }
      }
    },
    isPreview: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
    }
  },
  computed: {
    ...mapGetters(['getTheme'])
  },
  methods: {
    homeCardBg: () => getThemeColor('homeGridbg'),
    homeTooltipBg: () => getThemeColor('homeTooltipBg'),
    homeAxisText: () => getThemeColor('homeAxisText'),
    homeAxisSplitLine: () => getThemeColor('homeAxisLine'),
    textColor: () => getThemeColor('textColor'),
    homeTooltipBorderColor: () => getThemeColor('homeTooltipBorderColor'),
    tooltipOptions() {
      return {
        className: 'echarts-tooltip-box',
        appendToBody: true,
        backgroundColor: getThemeColor('homeTooltipBg'),
        borderColor: getThemeColor('homeTooltipBorderColor'),
        textStyle: {
          color: getThemeColor('textColor')
        }
      }
    },
    axisOptions() {
      return {
        nameTextStyle: {
          color: getThemeColor('homeAxisText'),
          align: 'right',
          fontSize: this.resetSize(10)
        },
        axisLine: {
          lineStyle: {
            color: getThemeColor('homeAxisLine'),
            fontSize: this.resetSize(12)
          },
          show: true
        },
        axisLabel: {
          color: getThemeColor('homeAxisText'),
          fontSize: this.resetSize(12)
        },
        axisTick: {
          show: false
        },
        splitLine: {
          lineStyle: {
            color: getThemeColor('homeAxisLine'),
            width: 1,
            type: 'dashed'
          }
        }
      }
    },
    titleOption(color = 'rgba(105, 231, 203, 1)') {
      const clientWidth = document.body.clientWidth
      const fontSize = Math.min(Math.floor(clientWidth / 100), 20)
      // const top = Math.ceil(fontSize / 20 * 43) + '%'
      return {
        left: this.isPreview ? '69.5%' : '69%',
        top: 'center',
        textVerticalAlign: 'top',
        textAlign: 'center',
        itemGap: this.isPreview ? 10 : 5,
        textStyle: {
          fontSize: this.resetSize(this.isPreview ? 16 : Math.ceil(fontSize * 12 / 20)),
          fontWeight: 400,
          color: color
        },
        subtextStyle: {
          fontSize: this.resetSize(this.isPreview ? 28 : fontSize),
          color: color
        }
      }
    },
    highchartTooltip() {
      return {
        shared: true,
        useHTML: true,
        borderRadius: 0,
        padding: 0,
        backgroundColor: 'transparent',
        borderColor: 'transparent',
        shadow: false,
        style: {
          color: getThemeColor('textColor'),
          fontFamily: 'Avenir, Helvetica, Arial, sans-serif'
        }
      }
    }
  }
}
